<template>
  <div>
    <el-dialog title="选择指派骑手" :visible.sync="dialogVisible" width="60%">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <div class="flex">
          <el-form-item label="配送员：">
            <el-input
              v-model="formInline.riderName"
              size="mini"
              placeholder="请输入"
              @keyup.enter="onSearch"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input
              v-model="formInline.riderPhone"
              size="mini"
              maxlength="11"
              placeholder="请输入骑手手机号"
              type="number"
              @keyup.enter="onSearch"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" size="mini" @click="onSearch()"
            >搜索</el-button
          >
          <el-button plain size="mini" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="main">
        <el-table
          ref="Table"
          :data="resultData.records"
          height="500"
          border
          tooltip-effect="dark"
          style="width: 100%"
          row-key="skuId"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="name" align="center" label="配送员">
          </el-table-column>
          <el-table-column prop="phone" align="center" label="手机号">
          </el-table-column>

          <el-table-column prop="orderCount" align="center" label="已接单">
          </el-table-column>
          <el-table-column
            prop="deliveryOrderCount"
            align="center"
            label="配送中"
          >
          </el-table-column>
          <el-table-column prop="poiName" align="center" label="当前位置">
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            background=""
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.current"
            :page-sizes="[10, 50, 100, 200, 500]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="resultData.total"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="compConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Debounce } from "@/utils/debounce";
export default {
  data() {
    return {
      dialogVisible: false,
      resultData: {
        records: [],
      },
      params: {
        current: 1,
        size: 10,
      },
      formInline: {
        riderName: "",
        riderPhone: "",
      },
      payload: {},
      selectedData: null,
    };
  },
  computed: {},
  methods: {
    open(payload) {
      this.payload = payload;
      this.dialogVisible = true;
      this.onReset();
    },
    getList() {
      this.$http({
        url: this.$http.adornUrl(`/platform/rider/pageList`),
        method: "get",
        params: this.$http.adornParams({
          ...this.formInline,
          ...this.params,
        }),
      }).then(({ data }) => {
        if (data) {
          console.log(data);
          this.resultData = data;
        }
      });
    },
    handleSizeChange(size) {
      console.log(size);
      this.params.size = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.params.current = page;
      this.getList();
    },
    onSearch() {
      this.params.current = 1;
      this.getList();
    },
    onReset() {
      this.selectedData = null;
      this.formInline = {
        riderName: "",
        riderPhone: "",
      };
      this.onSearch();
      this.$nextTick(() => {
        this.$refs.Table.clearSelection();
      });
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.Table.clearSelection();
        this.$refs.Table.toggleRowSelection(val[val.length - 1]);
      }
      this.selectedData = val[val.length - 1];
    },
    compConfirm: Debounce(function () {
      console.log(this.selectedData);
      if (!this.selectedData || !this.selectedData.id) {
        this.$message({
          message: "请选择一个骑手",
          type: "warning",
        });
        return;
      }
      this.$confirm(
        `确定要将订单[${this.payload.orderNumber}]指派给[${this.selectedData.name}]吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/platform/rider/assign"),
          method: "get",
          params: this.$http.adornParams({
            ...this.payload,
            riderId: this.selectedData.id,
          }),
        }).then(({ code, data }) => {
          if (code == "00000") {
            this.$message({
              message: "指派成功",
              type: "success",
              duration: 1500,
            });
            this.$refs.Table.clearSelection();
            this.onSearch();
            this.dialogVisible = false;
            this.$emit("refresh");
          }
        });
      });
    }),
  },
};
</script>

<style lang="scss" scoped>
.form-inline {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
}

.pagination {
  width: max-content;
  margin: 0 auto;
  margin-top: 20px;

  &::v-deep .el-pager li {
    border: 1px solid #d9d9d950 !important;
    background: white !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }

  &::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: white !important;
    background: #1890ff !important;
  }

  &::v-deep .el-pagination.is-background .btn-prev {
    border: 1px solid #d9d9d950 !important;
    background: white !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }

  &::v-deep .el-pagination.is-background .btn-next {
    border: 1px solid #d9d9d950 !important;
    background: white !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }
}

::v-deep thead {
  .el-table-column--selection {
    .cell {
      display: none;
    }
  }
}
</style>
